<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title></title>

    <script src="/static/jquery-1.9.1.min.js"></script>
    <script src="/static/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/static/bootstrap.min.css">

    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="/static/css/verify.css">

    <!--引入JS-->
    <script type="text/javascript" src="/static/js/verify.js"></script>


</head>
<body>
<div class="container-fluid">
    <div class="row"  style='margin-top:300px;'>
        <div class="col-xs-8 col-md-4 col-md-offset-4 col-xs-offset-2">
            <h1  >
                <a style='font-size:30px;' href="{:url('index/Index/email')}"> 邮箱注册
                &nbsp; </a>
               <span style='font-size:70px;'>登录界面</span>  &nbsp;
                <a style='font-size:30px;' href="{:url('index/Index/register')}">手机注册 </a>
            </h1>
        </div>
    </div>
    <div class="row " style='margin:0 auto;'>
        <div class="col-xs-8 col-md-4 col-md-offset-4 col-xs-offset-2">

            <form action="{:url('index/Index/dologin')}" method='post'>
                <input type="hidden" name="__token__" value="{$token}"/>

                <div class="form-group " onsubmit="return false">
                    <label for="exampleInputName" style='font-size:40px;margin-top:50px;'>用户名:</label>
                    <input type="text"   style='height:100px;font-size:40px;'   required  id='name' name="name" class="form-control" id="exampleInputName" placeholder="手机或邮箱">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1"  style='font-size:40px;margin-top:50px;'>密码:</label>
                    <input  maxlength="32"  style='height:100px;font-size:40px;'  required  onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')" type="password" name="pwd" class="form-control" id="exampleInputPassword1"
                           placeholder="密码长度为6-32位">
                </div>

                <div id="mpanel1" style="width=1000px; font-size:40px;margin-top:70px;"><!-- 滑动验证 --></div>


                <div class="input-group " style='margin-top: 40px; font-size:40px;  '>

                    <button type="submit" id='btn' disabled='disabled' style='font-size:40px;width:600px;height:100px;margin-top: 20px;' class="btn btn-default">登录
                    </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <td><a href="#" οnclick='toLogin()'><img style='width:200px;margin-top: 40px; margin-left: -110px; ' src="http://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png"></a></td>
                </div>

            </form>
        </div>
    </div>
</div>
<script>
    // 滑动验证
    //这里的初始化是滑动&拼图的标志slideVerify
    $('#mpanel1').slideVerify({
        //滑动验证码type=1，拼图验证码type=2
        type: 1,

        //验证成功以后的回调
        success: function () {
            alert('验证匹配！');
            aa();

        }

    });

    function aa() {
        $('#btn').attr('disabled', false);
    }

    $('#yz').click(function yz() {

        var tel = $("input[name='tel']").val();

        $.ajax({
            method: 'post',
            url: "{:url('index/index/send')}",
            dataType: 'json',
            data: {
                "tel": tel,
            },
            success: function (data) {
                console.log(data);
                if (data > 0) {
                    alert('发送成功');

                } else {
                    alert('发送失败');
                }

            },
            error: function () {
                alert('ajax执行失败');
            }
        });
    })

function name(){
      var name = $("input[name='name']").val();

  var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
    if(!reg.test(name))
    {
        alert("邮箱格式不对");
        return false;
    }
}


 function toLogin() {
        //以下为按钮点击事件的逻辑。注意这里要重新打开窗口
        //否则后面跳转到QQ登录，授权页面时会直接缩小当前浏览器的窗口，而不是打开新窗口
        var A=window.open("{:url('lx/QQ_log')}","TencentLogin","width=450,height=320,menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1");
    }



</script>


</body>
</html>